<template>
	<view>
		<navbar title="我收到的" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__box">
				<view class="con__box__top">
					<view class="con__box__top__item" v-for="(item,index) in toplist" :key="index">
						<view class="con__box__top__item__label">
							{{item.name}}
						</view>
						<view class="con__box__top__item__text u-flex u-flex-y-center">
							{{item.value}}
							<image src="/static/report/xia.png" class="con__box__top__item__xia" mode=""></image>
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="con__box__sc">
					<view class="con__box__list" v-if="list.length>0">
						<view class="con__box__item" v-for="(item,index) in list" :key="index">
							<image :src="URL(item.avatar)" class="con__box__item__tx" mode="aspectFill"></image>
							<view class="" style="flex: 1;">
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="con__box__item__name">
										{{item.username}}的日报({{$u.timeFormat(item.createtime, 'mm/dd')}})
									</view>
									<image src="/static/report/more.png" class="con__box__item__more" mode=""></image>
								</view>
								<view class="con__box__item__time">
									{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}
									周{{weekDays[new Date(item.createtime).getDay()]}}
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" fontSize='24rpx' color='#313131' :nomore-text="nomoreText"
						marginTop='50rpx' marginBottom='50rpx' />
				</scroll-view>
			</view>

		</view>
		<view class="footer">
			<view class="footer__item" v-for="(item,index) in footerlist" :key="index" @click="clickfooter(item)">
				<image :src="'/static/report/'+item.icon+'.png'" class="footer__item__icon" mode=""></image>
				<view class="footer__item__text">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				toplist: [{
						name: '时间',
						value: '全部时间',
						str: ''
					},
					{
						name: '汇报人',
						value: '全部汇报人',
						str: ''
					},
				],
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				status: 'nomore',
				nomoreText: '~暂无更多~',
				footerlist: [{
						text: '写报告',
						icon: 'tx',
						url: 'add'
					},
					{
						text: '我收到的',
						icon: 'tj',
						url: '',
						type: 1
					},
					{
						text: '我提交的',
						icon: 'tj',
						url: '',
						type: 2
					},
				],
				type: 1,
				list: []
			};
		},
		methods: {
			async getlist() {
				let res = await sale.dayUser({
					type: this.type
				})
				if (res.data.code == 1) {
					this.list = res.data.data
					// console.log(this.list)
				}
			},
			clickfooter(item) {
				if (item.url) {
					this.navto('/pages/report/' + item.url)
				} else {
					this.type = item.type
					if (this.type == 2) {
						this.toplist = [{
							name: '时间',
							value: '全部时间',
							str: ''
						}, ]
					}
					this.getlist()
				}
			}
		},
		onShow() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}

	.con {
		padding: 20rpx 30rpx 42rpx;
		height: calc(100vh - var(--status-bar-height) - 44px - 145rpx - 62rpx);

		&__box {
			height: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;

			&__top {
				height: 144rpx;
				border-bottom: 2rpx solid #F9F9F9;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 28rpx;

				&__item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 50%;

					&__label {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #686769;
						line-height: 24rpx;
						margin-bottom: 23rpx;
					}

					&__text {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1E1E1E;
						line-height: 28rpx;
					}

					&__xia {
						width: 15rpx;
						height: 10rpx;
						margin-left: 5rpx;
						margin-top: 2px;
					}
				}
			}

			&__sc {
				height: calc(100% - 146rpx);
			}

			&__list {
				padding: 6rpx 0 0 31rpx;

			}

			&__item {
				display: flex;
				align-items: center;
				padding: 31rpx 37rpx 23rpx 3rpx;
				border-bottom: 2rpx solid #F9F9F9;

				&__tx {
					width: 79rpx;
					height: 79rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}

				&__name {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					line-height: 30rpx;
				}

				&__more {
					width: 12rpx;
					height: 21rpx;
				}

				&__time {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #686769;
					line-height: 24rpx;
					margin-top: 15rpx;
				}
			}
		}
	}

	.footer {
		padding: 0 80rpx;
		height: 145rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__item {
			display: flex;
			flex-direction: column;
			align-items: center;

			&__icon {
				width: 38rpx;
				height: 38rpx;

			}

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #6D6D6D;
				line-height: 20rpx;
				margin-top: 16rpx;
			}
		}
	}
</style>